<template>
  <view class="filling">
    <view class="filling_center">
      <view class="datas">
        <uni-datetime-picker
          :value="range"
          type="daterange"
          :border="false"
          :clear-icon="false"
          rangeSeparator="至"
          @change="change"
        />
      </view>
    </view>
    <view class="filling_bottom">
      <text>加注量:{{ fillITop.count }}公斤</text>
      <!-- <text>金额:{{ fillITop.price }}元</text> -->
      <text>单数:{{ fillITop.total }}单</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { format, subDays } from 'date-fns';
import { ref } from 'vue';

defineProps({
  fillITop: {
    type: Object,
    default: () => ({}),
  },
});
// data
const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const range = ref([start, end]);

const emit = defineEmits(['timeSelection']);

emit('timeSelection', { start, end });

/**
 * 切换日期选择
 */
function change([start, end]) {
  emit('timeSelection', { start, end });
}
</script>

<style scoped lang="less">
.filling {
  width: 95%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  background-color: white;
  box-shadow: 0px 0px 51px 0px rgba(179, 179, 179, 0.25);
  border-radius: 5px;
  margin: 2.5%;
  .filling_top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
  .filling_center {
    // margin-top: 20rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .datas {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
    .screen {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
  .filling_bottom {
    margin-top: 10rpx;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    text {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      margin-right: 20rpx;
    }
  }
}
</style>
<style scoped>
.datas >>> .uni-date-x {
  background-color: transparent;
  padding: 0px !important;
}
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
